<template>
  <div class="detail">
    <van-nav-bar
      title="文章详情"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- <div v-for="item in detail" :key="item._id"> -->
    <h4>{{ detail.title }}</h4>
    <div class="author">
      <div class="imgs">
        <van-image width="50" height="50" round :src="detail.avatar" />
        <div class="text">
          <div>{{ detail.author }}</div>
<<<<<<< HEAD
          <!-- <div class="data">bug{{ detail.time }}</div> -->
=======
          <div class="data">{{ detail.time | timeFormat }}</div>
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
        </div>
      </div>
      <div class="attention"><van-icon name="plus" />关注</div>
      <!-- <div class="attention"><van-icon name="plus" />已关注</div> -->
    </div>
    <div class="txt">
      <p>
        {{ detail.content }}
      </p>
      <div v-for="(item, index) in detail.imageSrc" :key="index">
        <van-image width="100%" height="280" :src="item" />
      </div>
    </div>
    <!-- 点赞回复 -->
<<<<<<< HEAD
     <div class="author" v-for="item in commentLis  " :key="item._id">
      <div class="imgs">
        <van-image
          width="50"
          height="50"
          round
          :src="item.info.avatar"
        />
        <!-- 假的       1111111111111111111111111111111111111111111111111111 -->
        <div class="text">
          <div>{{item.info.nickname}}</div>
          <p>{{item.content}}</p>
          <div class="data">
            <span>2021-12-2</span>
            <span class="reply">{{item.reply_num}}</span>
          </div>
        </div>
        
      </div>
      <div class="Tags">
        <svg
          class="icon"
          aria-hidden="true"
          @click="show = true"
          :class="{ active: show === true }"
        >
          <use xlink:href="#icon-dianzan"></use>
        </svg>
        <span>21</span>
=======
    <div v-for="(item, index) in comment_list" :key="index">
      <div class="author">
        <div class="imgs">
          <van-image width="50" height="50" round :src="item.info.avatar" />
          <div class="text">
            <div>{{ item.info.nickname }}</div>
            <p>{{ item.content }}</p>
            <div class="data">
              <span>{{ item.create_time | timeFormat }}</span>
              <span class="reply" @click="content_reply(item)"
                >回复{{ item.reply_num }}</span
              >
            </div>
          </div>
        </div>
        <div class="Tags">
          <svg
            class="icon"
            aria-hidden="true"
            @click="show = true"
            :class="{ active: show === true }"
          >
            <use xlink:href="#icon-dianzan"></use>
          </svg>
          <span>{{ item.like_count }}</span>
        </div>
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
      </div>
    </div>

    <div class="bottom" v-show="inpt == false">
      <input type="text" placeholder="写评论" @click="inpt = true" />
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-wode"></use>
      </svg>
      <svg
        class="icon"
        aria-hidden="true"
        @click="toggleFav"
        :color="detail.is_fav ? '#f00' : '#777'"
      >
        <use xlink:href="#icon-shoucang"></use>
      </svg>
      <svg
        class="icon"
        aria-hidden="true"
        key=""
        @click="toggleLike"
        :color="detail.is_like ? '#f00' : '#777'"
      >
        <use xlink:href="#icon-dianzan"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fenxiang"></use>
      </svg>
    </div>
    <!-- 回复评论 -->
    <van-popup
      v-model="showPopup"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="upstairs">
        <div class="upstairs-close" @click="showPopup = false">X</div>
        <van-divider />
        <div class="upstairs-info">
          <van-image round width="60" height="60" :src="info.avatar" />
          <p>{{ info.nickname }}</p>
          <p class="upstairs-info-attention">关注</p>
        </div>
        <div class="upstairs-content">
          <p class="upstairs-content-text">
            {{ reply.content }}
          </p>
        </div>
        <van-divider />
        <div v-for="(item, index) in reply_list" :key="item._id">
          <div class="upstairs-info">
            <van-image round width="60" height="60" :src="item.info.avatar" />
            <p>{{ item.info.nickname }}</p>
            <p class="upstairs-info-attention">关注</p>
          </div>
          <div class="upstairs-content">
            <p class="upstairs-content-text">
              {{ item.content }}
            </p>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dianzan"></use>
            </svg>
          </div>
        </div>
        <div
          class="bottom"
          v-show="reviewinpt == false"
          @click="reviewinpt = true"
        >
          <input type="text" placeholder="写评论" />
         <!-- <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wode"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shoucang1"></use>
          </svg>
		  <svg class="icon" aria-hidden="true">
		    <use xlink:href="#icon-dianzan"></use>
		  </svg>
          <svg class="icon" aria-hidden="true"></svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fenxiang"></use>
          </svg> -->
        </div>
      </div>
      <!-- 回复评论-->
      <van-popup
        v-model="reviewinpt"
        position="bottom"
        :style="{ height: '30%' }"
      >
         <van-cell-group>
        <van-field
          v-model="ReplyComment"
          label="回复"
          :placeholder="info.nickname"
        />
        <van-button type="primary" size="large" @click="reviewsend"
          >确定</van-button
        >
      </van-cell-group>

        <!-- <div class="popup-bottom">
          <textarea v-model="ReplyComment"></textarea>
          <p @click="reviewsend">发送</p>
        </div> -->
      </van-popup>
    </van-popup>

    <!-- 回复框 -->
    <van-popup v-model="inpt" position="bottom" :style="{ height: '30%' }">
      <van-cell-group>
        <van-field
          v-model="article_comment"
          label="回复"
          :placeholder="detail.author"
        />
        <van-button type="primary" size="large" @click="send"
          >确定</van-button
        >
      </van-cell-group>
    </van-popup>
  </div>
</template>
<script>
import { Popup, Divider } from "vant";
import { mapState } from "vuex";
export default {
  name: "detail",
  data() {
    return {
<<<<<<< HEAD
      show: false,
      delshow: false,
      detail: {},
      commentLis:[]

=======
      inpt: false, //发表评论
      show: false, //评论点赞
      detail: {}, //文章详情
      comment_list: [],
      time: "",
      article_comment: "",
      showPopup: false, //回复评论弹出层
      reply_list: [], //评论列表
      reply: {}, //楼
      info: {}, //楼
      reviewinpt: false, //回复评论
      ReplyComment: "",
      reply_comment_id: "", //评论ID
      article_id: "",
      item:'',
	  placeholder:'请输入你的评论'
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
    };
  },
  components: {
    [Popup.name]: Popup,
    [Divider.name]: Divider,
  },
  created() {
    let { article_id } = this.$route.query;
    this.article_id = article_id;
    this.getdetail();
<<<<<<< HEAD
    this.getcommentList();
=======

    this.getcomment_list();
    this.$forceUpdate();
  },
  filters: {
    // 时间
    timeFormat(lv) {
      // console.log(lv);
      let time = new Date(lv);
      //     // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "/" + (month.length1 ? month : "0" + month) + "/" + day;
    },
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
  },
  // 挂载后
  mounted() {},
  computed: {
    ...mapState(["uid"]),
  },
  methods: {
    // 点赞  有bug  退出登录了  还显示点赞
    toggleLike() {
      let {
        uid,
        detail: { is_like },
        article_id,
      } = this;
      console.log(is_like);
      console.log(uid)
      if (!uid) {
         this.detail.is_like = false;
        this.$toast("请先登录");
        setTimeout((v) => {
          this.$router.push("/login");
        });
        return;
      }
      if (is_like) {
        this.$http({
          url: "/api/unlike",
          method: "POST",
          //传参
          data: {
            user_id: uid,
            article_id,
          },
        })
          .then((res) => {
            console.log(res);
            this.$toast(res.msg);
            if (res.code == 0) {
              this.detail.is_like = false;
            } else {
              this.$toast(res.msg || "取消点赞失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$http({
          url: "/api/like",
          method: "POST",
          //传参
          data: {
            user_id: uid,
            article_id,
          },
        })
          .then((res) => {
            console.log(res);
            this.$toast(res.msg);
            if (res.code == 0) {
              this.detail.is_like = true;
            } else {
              this.$toast(res.msg || "点赞失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 收藏
    toggleFav() {
      let {
        uid,
        detail: { is_fav },
        article_id,
      } = this;
      // console.log(this.detail.is_fav);
      if (!uid) {
        this.$toast("请先登录");
        setTimeout((v) => {
          this.$router.push("/login");
        });
        return;
      }
      if (is_fav) {
        this.$http({
          url: "/api/remove_fav",
          method: "POST",
          //传参
          data: {
            user_id: uid,
            article_id,
          },
        })
          .then((res) => {
            console.log(res);
            this.$toast(res.msg);
            if (res.code == 0) {
              this.detail.is_fav = false;
            } else {
              this.$toast(res.msg || "取消收藏失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$http({
          url: "/api/add_fav",
          method: "POST",
          //传参
          data: {
            user_id: uid,
            article_id,
          },
        })
          .then((res) => {
            console.log(res);
            this.$toast(res.msg);
            if (res.code == 0) {
              this.detail.is_fav = true;
            } else {
              this.$toast(res.msg || "收藏失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 评论回复
    reviewsend() {
      let uid = localStorage.getItem("tt-uid");
      let { article_id } = this.$route.query;
      let { ReplyComment, reply_comment_id } = this;
      this.$http({
        url: "/api/add_comment",
        method: "POST",
        //传参
        data: {
          user_id: uid,
          article_id,
          comment_type: 1,
          content: ReplyComment,
          reply_comment_id,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.$toast("回复评论成功");
            this.ReplyComment=''
            this.reviewinpt=false            
            this.content_reply(this.item) 
            // setTimeout((v) => {
            //   this.reviewinpt = false;
            // }, 2000);
          } else {
            this.$toast(res.msg || "评论失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 回复评论列表
    content_reply(item) {
      this.item=item
      let { _id } = item;
      console.log(item);
      this.reply_comment_id = item._id;
      this.reply = item;
      this.info = item.info;
      this.showPopup = true;
      let uid = localStorage.getItem("tt-uid");
      let { article_id } = this.$route.query;
      console.log(_id);
      this.$http({
        url: "/api/get_reply_list",
        method: "POST",
        //传参
        data: {
          article_id,
          user_id: uid,
          reply_comment_id: _id,
        },
      })
        .then((res) => {
          console.log(res);
          this.reply_list = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 评论
    send() {
      this.get_add_comment();
    },
    // 评论
    get_add_comment() {
      let uid = localStorage.getItem("tt-uid");
      let { article_id } = this.$route.query;
      let { article_comment } = this;
      this.$http({
        url: "/api/add_comment",
        method: "POST",
        //传参
        data: {
          user_id: uid,
          article_id,
          comment_type: 0,
          content: article_comment,
          reply_comment_id: 0,
        },
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.$toast("评论成功");
            this. getcomment_list() 
            this.article_comment = "";
            setTimeout((v) => {
              this.inpt = false;
            }, 2000);
          } else {
            this.$toast(res.msg || "评论失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 文章详情
    getdetail() {
      let { article_id } = this.$route.query;
      console.log(article_id);
      this.$http({
        url: "/api/get_article_detail",
        method: "POST",
        //传参
        data: {
			user_id:this.uid,
          article_id,
        },
      }).then((res) => {
		  console.log(res)
        console.log(res.data);
        this.detail = res.data;
      });
    },

    // 评论列表
<<<<<<< HEAD
    getcommentList() {
      let { article_id } = this.$route.query;
      let user_id = localStorage.getItem("tt-uid");
      this.$http({
        url: "/api/get_comment_list",
        method: "POST",

        //传参
        data: {
          article_id,
          user_id,
        },
      }).then((res) => {
        console.log(res);
        this.commentLis=res.data
=======
    getcomment_list() {
      let { article_id } = this.$route.query;
      this.$http({
        url: "/api/get_comment_list",
        method: "POST",
        //传参
        data: {
          article_id,
        },
      }).then((res) => {
        console.log(res.data);
        this.comment_list = res.data;
>>>>>>> afd131330dce6812e756b2d50a2ff75e2b319207
      });
    },
  },
};
</script>
<style lang='less' scoped>
/*评论回复*/
.detail {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  .upstairs {
    width: 100%;
    &-close {
      font-size: 40px;
      text-align: right;
      margin-right: 20px;
      margin-top: 10px;
    }
    &-info {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      p {
        /* width: 100px;*/
        margin-left: 20px;
      }
      &-attention {
        width: 60px;
        border: 1px solid #b4b4bb;
        text-align: center;
      }
    }
    &-content {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      &-text {
        width: 300px;
        word-wrap: break-word;
        word-break: break-all;
        margin-top: 10px;
        line-height: 20px;
        text-indent: 1em;
      
        span {
          border: 1px solid #b4b4bb;
          border-radius: 20px;
          margin-left: 20px;
        }
      }
    }
  }

  ::v-deep .van-button--primary {
    position: fixed;
    bottom: 0;
  }
  .active {
    color: red;
  }
  .activeyellow {
    color: yellowgreen;
  }
  background-color: #fafafa;
  h4 {
    margin-left: 15px;
  }
  /*头像*/
  .author {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f5f6f7;
      padding-bottom: 50px;
    .imgs {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-left: 10px;
      padding-bottom: 30px;
      .text {
        width: 100%;
        margin-left: 20px;
        padding: 20px 0;
        p {
          width: 230px;
          word-wrap: break-word;
          font-size: 18px;
        }
        .data {
          margin-top: 10px;
          color: #b4b4bb;
          .reply {
            width: 60px;
            border: 1px solid #b4b4bb;
            border-radius: 15px;
            margin-left: 15px;
            padding: 0 10px;
          }
        }
      }
    }
    .attention {
      border: 1px solid #666;
      border-radius: 15px;
      padding: 2px 15px;
      font-size: 15px;
    }
    .Tags {
      margin-right: 15px;
      font-size: 15px;
    }
  }
  .txt {
    width: 100%;
    p {
      width: 360px;
      word-wrap: break-word;
      word-break: break-all;
      font-size: 16px;
      margin:auto;
      line-height: 25px;
    }
  }
  .bottom {
    height: 50px;
    width: 100%;
    position: fixed;
    background: #fff;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;

    input {
      width: 180px;
      height: 25px;
      border-radius: 15px;
      border-width: 1px;
      text-align: center;
      margin-left: 15px;
    }
  }
}
</style>